<template>
  <div class="articles-holder" v-loading="loading">
    <template v-for="article in articles" :key="article">
      <router-link :to="{ name:'article', params: { articleId: article.id }}">
        <div class="article-wrapper">
          <div class="article-bg" v-bind:style='{backgroundImage:"url("+article.picture.halfImgUrl+")"}'></div>
          <div class="article-wrapper-content">
            <h2 class="article-title">{{article.title}}</h2>
            <div class="article-preview">
              <p class="article-summary">{{article.summary}}</p>
              <div class="tag-box">
                <div class="tag-item" v-for="tag in article.tags" :key="tag">
                  <span v-bind:style="`${tag.tagCss?tag.tagCss:''}`"><i v-bind:class="`${tag.tagIcon?tag.tagIcon:'fa fa-tag'}`"></i><small>&nbsp;{{ tag.tagName }}</small></span>
                </div>
              </div>
              <el-divider style="margin: 5px 0;"></el-divider>
              <div class="article-info-box">
                <div class="article-info-item"><i class="el-icon-time"></i> 创建日期 {{Utils.formatDate(article.createTime,'yyyy-MM-dd hh')}}<small>H</small></div>
                <div class="article-info-item"><i class="el-icon-chat-dot-square"></i> {{article.commentCount}} 条评论</div>
                <div class="article-info-item"><i class="el-icon-view"></i> {{article.viewCount}} 次浏览</div>
                <div class="article-info-item"><i class="el-icon-thumb"></i> {{article.thumbCount}} 个点赞</div>
              </div>
            </div>
          </div>
        </div>
      </router-link>
    </template>
  </div>
</template>
<script>
  export default {
    props: {
      query: {
        type: Object
      }
    },
    data() {
      let query = this.query;
      this.$axios.get('/api/article-service/article/pageUsableByQuery', {
        isIndex: query.isIndex
      }).then(resultData => {
        this.articles = resultData.records;
        setTimeout(() => this.loading = false, 1000);
      }).catch(() => {

      });
      return {
        articles: {},
        loading: true
      }
    }
  }
</script>